<template>
	<div class="comment_list_wrapper">
		<el-radio-group class="aside" v-model="resType">
			<el-radio label="11">书籍评论</el-radio>
			<el-radio label="12">分享交流</el-radio>
			<el-radio label="13">强军论坛</el-radio>
		</el-radio-group>
		<div class="content">
			<template v-if="commentList.length > 0">
				<div class="list">
					<comment-item v-for="(item, index) in commentList" :key="index" :type="resType" :data="item"></comment-item>
				</div>
				<div class="page"><Pagination :total="dataCount" @change="getCommentListData" :page.sync="listQuery.page" :limit.sync="listQuery.limit" /></div>
			</template>
			<template v-else>
				<el-empty description="暂无评论" :image-size="120"></el-empty>
			</template>
		</div>
	</div>
</template>

<script>
import commentItem from './item';
import { sysEvaluateQuery } from '@/api/admin/comment';
export default {
	components: { commentItem },
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10,
				type: '1'
			},
			resType: '11',
			dataCount: 0,
			commentList: []
		};
	},
	watch: {
		resType: {
			handler(val) {
				this.getCommentListData(val);
			},
			immediate: true
		}
	},
	methods: {
		//获取评价数据
		async getCommentListData(resType) {
			let params = { ...this.listQuery, resType };
			let result = await sysEvaluateQuery(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.commentList = !result.data ? [] : [...result.data];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.comment_list_wrapper::v-deep {
	display: flex;
	margin-top: -6px;
	height: calc(100% + 6px);
	.aside {
		width: 180px;
		flex-shrink: 0;
		margin-right: 16px;
		padding: 16px;
		border-right: solid 1px #ebeef5;
		.el-radio {
			display: flex;
			align-items: center;
			padding: 10px 0;
		}
		.el-radio__label {
			font-size: 18px;
		}
		.is-checked .el-radio__label {
			font-weight: bold;
		}
		.el-radio__input {
			font-size: 0;
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.list {
		flex: 1;
		overflow: auto;
		border-bottom: solid 1px #eee;
	}
	.pagination {
		margin-top: 10px;
	}
}
</style>
